<template>
  <div>
    <DialogBox title="添加数据集" width="50%" maxHeight="50vh" :appendToBody="true" :visible="showDataSetDialog"
               :confirm="surebtn" :close="onClose">
      <el-input placeholder="请输入内容" v-model="search" size="small" @keydown.enter="enter" @input="selectName"
                class="input-with-select">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>

      <!--      <el-tabs v-model="visibility" @tab-click="getDatasets">-->
      <!--        <el-tab-pane label="我的数据集" name="0"></el-tab-pane>-->
      <!--        <el-tab-pane label="共享数据集" name="1"></el-tab-pane>-->
      <!--        <el-tab-pane label="公开数据集" name="2"></el-tab-pane>-->
      <!--      </el-tabs>-->
      <div class="radio_box">
        <el-radio-group v-model="visibility" @input="getDatasets">
          <el-radio-button :label="'0'" :name="'0'" :value="'0'">我的数据集</el-radio-button>
          <el-radio-button :label="'1'" :name="'1'" :value="'1'">共享数据集</el-radio-button>
          <el-radio-button :label="'2'" :name="'2'" :value="'2'">公开数据集</el-radio-button>
        </el-radio-group>
      </div>
      <ul class="infinite-list clearfix">
        <li v-for="(item, index) in tableData" :key="index" class="infinite-list-item">
          <!-- <div @click="currentSelect(item)" :class="['adorn-checkbox',  {'checkbox-false': !item.ischecked},{'checkbox-true': item.ischecked}]"></div> -->
          <el-checkbox v-model="item.checked" class="myself-dataset-checkbox" @change="currentSelect(item)">
            <div class="">
              <v-image class="dimg" :src="item.avatar?item.avatar: require('@/assets/img/drone3.jpg')"/>
              <div class="datas-box">
                <p class="pall datasname">
                  {{ item.name }}
                </p>
                <p class="pall pcontents" :title="item.desc">
                  {{ item.desc }}
                </p>
              </div>
            </div>
          </el-checkbox>
        </li>
      </ul>
      <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
        <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
                       :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum"
                       @current-change="handleCurrentChange"
                       :total="Pagedata.total">
        </el-pagination>
      </div>
    </DialogBox>
  </div>
</template>

<script>
import DialogBox from '@/components/module/dialog-box.vue';
import {getDataSets} from "@/api/dataset";
import {debounce} from "@/utils/tool";

export default {
  name: 'plugInDataset',
  data() {
    return {
      showSelectDialog: false,
      search: "",
      tableData: [],
      datasets: [],
      checkDatasets: [],
      visibility: '0',
      Pagedata: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        order: "create_time", // 排序recommend、createTime、likeCount
      }
    }
  },
  props: ["dataset_list", "showDataSetDialog"],
  watch: {
    dataset_list(val) {
      console.log(val)
      this.checkDatasets = val.map(e => e.dataset || e)
      console.log(this.checkDatasets)
    }
  },
  methods: {

    surebtn() {
      this.$emit('infoDataset', this.checkDatasets)
      this.showSelectDialog = false;
      this.$emit('onClose', false)
    },
    currentSelect(data) {
      if (data.checked) {
        let index = this.checkDatasets.findIndex(o => o.id === data.id)
        if (index < 0) {
          this.checkDatasets.push(data);
        }
      } else {
        let index = -1;
        index = this.checkDatasets.findIndex(o => o.id === data.id)
        if (index > -1) {
          this.checkDatasets.splice(index, 1);
        }
      }
    },
    async getDatasets() {
      let res = await getDataSets({...this.Pagedata, visibility: this.visibility});
      this.Pagedata.total = res.data.total
      this.setCheckOn(res.data.list)
      this.tableData = res.data.list
    },
    selectName() {
      debounce(() => {
        this.getDatasets();
      }, 400)()
    },
    enter() {
      this.getDatasets();
    },
    tabClick() {
      this.Pagedata.current = 1;
      this.getDatasets();
    },
    handleCurrentChange(val) {
      this.Pagedata.current = val;
      this.getDatasets();
    },
    removetag(index) {
      this.checkDatasets.splice(index, 1);
      this.checkDatasets = JSON.parse(JSON.stringify(this.checkDatasets))
      console.log(this.checkDatasets)
      this.$emit('infoDataset', this.checkDatasets)
    },
    onClose() {
      this.showSelectDialog = false;
      this.$emit('onClose', false)
    },
    initCheckDataset() {
      // this.checkDatasets = []
      if (!this.dataset_list) return
      // for (let item of this.dataset_list) {
      //   let dataset = {}
      //   dataset.id = item.dataset_id
      //   dataset.name = item.dataset && item.dataset.name
      //   dataset.alias = item.dataset && item.dataset.alias
      //   this.checkDatasets.push(dataset)
      // }
      this.checkDatasets = this.dataset_list.map(e => e.dataset || e)
      console.log("checkDatasets", this.checkDatasets)
    },
    setCheckOn(data) {
      for (let item of data) {
        for (let data of this.checkDatasets) {
          if (data.id == item.id) {
            item.checked = true
            break
          } else {
            item.checked = false
          }
        }
      }
    },
    showSelectBox() {
      this.showSelectDialog = true;
      this.getDatasets()
    },
  },
  components: {
    DialogBox,
  },
  mounted() {
    this.initCheckDataset()
    this.getDatasets()
  },
  destroyed() {

  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/task.less";
.myself-dataset-checkbox {
  display: flex;

  /deep/ .el-checkbox__input {
    padding-top: 28px;
  }
}

.infinite-list {
  min-height: 380px;
  padding: 20px 0;
}

.infinite-list-item {
  //margin-bottom: 20px;
  //float: left;
  ////width: 496px;
  //width: 992px; //数据集改版后调整为一行一个
  width: 100%;
  //background: white;
  margin-bottom: 12px;
  padding: 10px 18px;
  //background: #4AE287;
}

.elrowgutter {
  /deep/ .el-button--default {
    margin-left: 100px;
    width: 80%;
    background-color: #f5f7fa;
    color: #1e2480;
    margin-bottom: 20px;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    padding-right: 30px;
  }
}

.delnode {
  margin-left: 73%;
}

.run-model-title {
  color: #303133;
}

.run-model-table {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 0 8px;
  margin-top: 6px;

  .r-m-box {
    border-top: 1px solid #e8e8e8;
    height: 38px;
    line-height: 38px;

    .r-m-name {
      float: left;
      width: 148px;
      padding-left: 14px;
    }

    .r-m-product {
      float: left;
      width: 250px;
    }

    .r-m-command {
      float: left;
      width: 120px;

      .popover {
        cursor: pointer;

        i {
          font-size: 16px;
          color: #4285F4;
        }
      }
    }

    .r-m-number {
      float: left;
    }
  }

  .no-border {
    border: 0;
  }
}

.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}

.checkbox-true {
  // background: url(~@/assets/img/checkbox-true.jpg) no-repeat;
  background-size: 18px 18px;
}

.checkbox-false {
  // background: url(~@/assets/img/checkbox-false.jpg) no-repeat;
  background-size: 18px 18px;
}

.adorn-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  float: left;
  margin-top: 20px;
  margin-right: 10px;
}

.dimg {
  width: 123px;
  height: 75px;
  float: left;
}

.datas-box {
  float: left;
  width: 296px;

  .datasname {
    vertical-align: top;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 1;
  }

  .pcontents {
    margin: 15px 0 0 5px;
    font-size: 14px;
    color: #606266;
    line-height: 24px;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .pall {
    overflow: hidden;
    margin-left: 5px;
  }
}

.version-box {
  float: right;

  .sb {
    /deep/ .el-input.el-input__inner {
      border-color: #4285f4 !important;
      font-size: 12;
    }
  }
}

.dataset-tags-box {
  // width: 240px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;

  .dataset-addr {
    padding-left: 10px;
    line-height: 30px;
    float: left;
  }

  .delstr {
    color: red;
  }
}

.dataset-tags {
  // display: block;
  // max-width: 240px;
  float: left;

  /deep/ .el-tag__close {
    float: left;
    margin-top: 6px;
  }

  .dataset-tags-word {
    // display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 140px;
    float: left;
  }
}

//暂时更改
/deep/ .el-button--default {
  background: #333B54;
  border-color: #4A567E;
  color: #B8C2E5 !important;
}

.radio_box {
  margin-top: 20px;
}

/deep/ .el-input__inner {
  background: #465072;
  border: 1px solid #8492C2;
  color: white !important;
}

/deep/ .el-dialog {
  background: #1A1E2C;
}

/deep/ .datas-box .pcontents {
  color: #8492C2;
}

.infinite-list-item:hover {
  background: #343E5F;
}

.clearfix {
  background: #252C44;
}

/deep/ .el-pagination.is-background .el-pager li {
  background: #202432;
}

/deep/ .pagination-box .btn-prev, /deep/ .pagination-box .btn-next {
  border: 1px solid #177DDC;
  background: #202432;
}
.radio_box {
  margin-top: 20px;
}

</style>
